import { useState } from "react";

function Square ({value, onSquareClick}) {
    return <button className="square" onClick={onSquareClick}>{value}</button>
}

export default function Game () {
    const [ history, setHistory ] = useState([Array(9).fill(null)])
    const [ currentMove, setCurrentMove ] = useState(0)
    // currentMove更新，xIsNext也会更新
    const xIsNext = currentMove % 2 === 0
    const currentSquares = history[currentMove] // 点击时光倒流，这里的数据是更新后指向最新的nextMove
    function handlePlay (nextSquares) {
        const nextHistory = [...history.slice(0, currentMove + 1), nextSquares]
        // history里面记录所有的历史数据
        setHistory(nextHistory)
        // 更新最新的指针
        setCurrentMove(nextHistory.length - 1)
        // setXIsNext(!xIsNext)
    }

    function jumpTo (nextMove) {
        // 每次点击历史，history不会变
        setCurrentMove(nextMove)
        // X一定是偶数，O一定是奇数
        // setXIsNext(nextMove % 2 === 0)
    }
    const moves = history.map((squares, move) => {
        let description;
        if (move > 0) {
            description = 'Go to move #' + move
        } else {
            description = 'Go to game start'
        }
        return (
            <li key={move}>
                <button onClick={() => jumpTo(move)}>
                    {description}
                </button>
            </li>
        )
    })
    return (
        <div className="game-board">
            <div>
                <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay}  />
            </div>
            <div className="game-board">
                <ol>{moves}</ol>
            </div>
        </div>
    )
}

function Board({xIsNext, squares, onPlay}) {
    function handleClick (i) {
        if (calculateWinner(squares) || squares[i]) {
            return
        }
        const nextSquares = squares.slice()
        if (xIsNext) {
            nextSquares[i] = 'X'
        } else {
            nextSquares[i] = 'O'
        }
        // 这两步状态更新是异步的，会放到下一次一起渲染
        onPlay(nextSquares)
        // 如果status和winner放在这里，则是拿到之前的状态更新的数据
    }
    let status = "Next player: " + (xIsNext ? "X" : "O");
    const winner = calculateWinner(squares)
    if (winner) {
        status = winner + '获胜了'
    } else {
        status = "Next player: " + (xIsNext ? "X" : "O");
    }
    return <>
        <div className="status">{status}</div>
        <div className="board-row">
            <Square value={squares[0]} onSquareClick={() => handleClick(0)}/>
            <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
            <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
        </div>
        <div className="board-row">
            <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
            <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
            <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
        </div>
        <div className="board-row">
            <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
            <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
            <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
        </div>
    </>;
}

function calculateWinner (squares) {
    let lines = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6]
    ]

    for (let i = 0; i < lines.length; i++) {
        const [a, b, c] = lines[i]
        if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
            return squares[a]
        }
    }
    return null
}
